<section id="preview-list">
        <h3 class="preview-title font-16">园区服务</h3>
        <div class="preview-list-wrap">
          <div class="box-o-shadow ptb-10 mt-15 br-4">
            <h3 class="text-center font-16" style="margin:15px 0 0;font-weight:bold;">{{ data.title }}</h3>
            <div class="mt-15 html-preview pl-12 pr-12"></div>
          </div>
          <div class="box-o-shadow ptb-10 mt-15 br-4">
            <h3 class="font-16 color-666 pl-12" style="margin:5px 0 0;">附件</h3>
            <ul class="pl-12 mt-10">
              <li v-for="item in data.files">
                <a :href="item.url" :download="item.name" class="color-999 line-height-34">
                  <span class="mr-5" :class="{'icon-file': item.type == 'file', 'icon-picture': item.type == 'pic'}"></span>
                  {{item.name}}
                </a>
              </li>
            </ul>
          </div>
          
        </div>
        <div class="text-center mt-15 pb-10">
          <button class="n-btn-primary br-4" @click="back">返回</button>
        </div>
      </section>
      <script src="modules/workbench/scripts/preview_service.js" charset="utf-8"></script>
      <style media="screen">
        body {
          background: #fff !important;
        }
        .box-o-shadow {
          box-shadow:0px 0px 6px 0px rgba(177,177,177,0.5);
        }
        .preview-title {
          width: 100%;
          height:68px;
          line-height: 68px;
          text-align: center;
          background:rgba(86,94,153,1);
          color: #fff;
          margin: 0;
        }
        .preview-list-wrap {
          width: 750px;
          margin: 0 auto;
        }
        .html-preview img {
          display: block;
          margin:0 auto;
          max-width: 100%;
          max-height: auto;
        }
        .html-preview table th,.html-preview table td {
          border: 1px solid #ccc !important;
          border-bottom: 2px solid #ccc !important;
          text-align: center;
        }
      </style>
      